<template>
  <div class="Pagination">
    <el-pagination
        v-show="total > 0"
        v-model:current-page="updateCurrent"
        v-model:page-size="updatePageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        :small="false"
        layout="total, sizes, prev, pager, next, jumper"
        @change="handleChange"
    />
  </div>
</template>

<script lang="ts">
export default {
  name: "Pagination"
}
</script>

<script setup lang="ts">
import {computed, onMounted} from "vue"

type change = {
  pageSize: number
  current: number
}

const props = defineProps<{
  pageSize: number
  current: number
  total: number
}>()

const emit = defineEmits<{
  (e: 'update:pageSize', pageSize: number): void
  (e: 'update:current', current: number): void
  (e: 'change', data: change): void
}>()

const updatePageSize = computed( {
  get() {
    return props.pageSize
  },
  set(val) {
    emit("update:pageSize", val)
  }
} )

const updateCurrent = computed( {
  get() {
    return props.current
  },
  set(val) {
    emit("update:current", val)
  }
} )

const handleChange = (v) => {
  emit("change", {
    current: updateCurrent.value,
    pageSize: updatePageSize.value
  })
}

onMounted( () => {
} )
</script>

<style scoped lang="scss">
.Pagination{
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
